'use client'
import Logo from "./logo";
import {Navbar, NavbarBrand, NavbarContent,NavbarMenuToggle,NavbarMenu,NavbarMenuItem, NavbarItem, Link, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu, Avatar, Button, Popover, PopoverContent, PopoverTrigger} from "@nextui-org/react";
import React, { useState } from "react";
import Language from "./language";
import Nightify from "./nightify";
import lang from "../i18n";
import { useLoginStatus, useLoginUser } from "@/utils/hooks";
import AvatarBox from "./avatarBox";

/**
 * @name 顶部导航栏
 * @prop {
 *  
 * }
 */

function CTopNav (props){
  const { isMenuOpen,setIsMenuOpen } = useState(false)
  let loginStatus = useLoginStatus()
  let loginUser = useLoginUser()
  const menus = props.menus
  // const t = props.lang
  // 子项
  const NavItem = ({menu}) =>{
    if(menu.item){
      return (
        <NavbarItem isActive={menu.isActive} key={menu.title} className="ml-1">
          <Dropdown>
            <DropdownTrigger>
              <div 
                className="p-0 bg-transparent data-[hover=true]:bg-transparent"
              >{menu.title}</div>
            </DropdownTrigger>
            <DropdownMenu 
              aria-label={menu.title}
              className="w-[340px]"
              itemClasses={{
                base: "gap-4",
              }}
            >
              {menu.item.map((item, index) => {
                return (
                <DropdownItem key={index} description={item.description}>
                  <Link color={
                    item.isActive ? "primary" : "foreground"
                  } href={item.href}>
                      {item.title}
                  </Link>
                </DropdownItem>
              )})}
            </DropdownMenu>
          </Dropdown>
        </NavbarItem>)
    }else{
      return (
        <NavbarItem key={menu.title} isActive={menu.isActive} className="ml-1">
          <Link href={menu.href}  color={
            menu.isActive ? "primary" : "foreground"
          }>
              {menu.title}
          </Link>
        </NavbarItem>
      )
    }
  }
  // 返回
    return (
    <Navbar disableAnimation onMenuOpenChange={setIsMenuOpen} maxWidth="full" style={{'position': 'fixed'}}>
        <NavbarMenuToggle
          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
          className="sm:hidden"
        />
        <NavbarContent justify="center">
          <NavbarBrand>
            <Logo />
          </NavbarBrand>
        </NavbarContent>
      <NavbarContent className="hidden sm:flex gap-4" justify="center">
        {
          menus.map((menu,m)=>{
            // return NavItem(menu)
            return <NavItem menu={menu} key={m}></NavItem>
          })
        }
      </NavbarContent>
      <NavbarMenu>
        {menus.map((menuItem, meI) => (
          <NavbarMenuItem key={meI}>
            <Link
              color={
                menuItem.isActive ? "primary" : "foreground"
              }
              className="w-full"
              href={menuItem.href}
              size="lg"
            >
              {menuItem.title}
            </Link>
          </NavbarMenuItem>
        ))}
      </NavbarMenu>
      <NavbarContent as="div" justify="end">
        <NavbarItem key="downloadApp" className="hidden sm:block">
            {lang('topNav.downloadApp',props.lng)}
        </NavbarItem>
        <Language lng={props.lng}></Language>
        <Nightify></Nightify>
        {
          !loginStatus?<Button color="primary" className="w-32">{lang('topNav.loginRegister',props.lng)}</Button>:
          <div>
            <Popover showArrow placement="bottom-end">
              <PopoverTrigger>
                <Avatar src="https://via.placeholder.com/40x40?text=Avatar" isBordered color="success"/>
              </PopoverTrigger>
              <PopoverContent>
                  <AvatarBox user={loginUser}></AvatarBox>
              </PopoverContent>
            </Popover>
          </div>
        }
      </NavbarContent>
    </Navbar>
    )
}
export default CTopNav